<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem相对单位布局</title>
  <link rel="stylesheet" href="styles/icon.css">
  <link rel="stylesheet" href="styles/layout-rem.css">
</head>
<body>
  <div class="page">
    <header class="top">
      <div class="top-title">排行榜</div>
      <nav class="tabs">
        <ul>
          <li class="tab-item tab-active">
            <img src="imgs/icon_article.webp" />
            <span>好文精选</span>
          </li>
          <li class="tab-item">
            <img src="imgs/icon_hot.webp" />
            <span>热门资讯</span>
          </li>
        </ul>
      </nav>
      <nav class="cats">
        <ul class="cat-list">
          <li class="cat-item cat-active">文章</li>
        </ul>
      </nav>
    </header>
    <main class="list">
      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/pic-1.jpg" class="cover-img" />
          <img src="imgs/rank-top1.png" class="cover-rank" />
        </div>
        <div class="sku-title">
          不会吧，不会吧，原来还有这么好用的工具！花小钱解决大问题之五金工具篇
        </div>
        <div class="sku-footer">
          <i class="iconfont icon-comment"></i>
          <span>165</span>
          <i class="iconfont icon-thumb-up"></i>
          <span>662</span>
        </div>
      </a>
      <a href="#" class="sku">
        <div class="cover">
          <img src="imgs/pic-2.jpg" class="cover-img" />
          <img src="imgs/rank-top2.png" class="cover-rank" />
        </div>
        <div class="sku-title">
          科学省钱 篇四十八：【微信立减金】 工行22元，中行5元，浦发4元+
        </div>
        <div class="sku-footer">
          <i class="iconfont icon-comment"></i>
          <span>116</span>
          <i class="iconfont icon-thumb-up"></i>
          <span>349</span>
        </div>
      </a>
    </main>
  </div>
  <script>
    function resize() {
      let doc = document.documentElement
      let width = doc.clientWidth
      let ratio = width / 375
      let fontSize = 10 * ratio
      if (fontSize > 20) fontSize = 20
      doc.style.fontSize = fontSize + 'px'
    }
    // 监听resize事件，调整窗口大小，感受rem的作用，这里只考虑竖屏的情况
    window.onresize = resize
    resize()
  </script>
</body>
</html>